<template>
  <div class="page page-dog2">
    <!-- 背景 -->
    <div v-if="sex" class="container-bg"><img src="@/assets/bg_dog_lady.png" class="bg"></div>
    <div v-else class="container-bg"><img src="@/assets/bg_dog_man.png" class="bg"></div>
    <!-- ui组-lady -->
    <div v-if="sex" class="container-ui-group">
      <div class="container-item" @click="routerLink(1)"><img src="@/assets/item_food_1.png" class="item"></div>
      <div class="container-item" @click="routerLink(2)"><img src="@/assets/item_food_2.png" class="item"></div>
      <div class="container-item" @click="routerLink(3)"><img src="@/assets/item_food_3.png" class="item"></div>
    </div>
    <!-- ui组-man -->
    <div v-else class="container-ui-group">
      <div class="container-item" @click="routerLink(4)"><img src="@/assets/item_food_4.png" class="item"></div>
      <div class="container-item" @click="routerLink(5)"><img src="@/assets/item_food_5.png" class="item"></div>
      <div class="container-item" @click="routerLink(6)"><img src="@/assets/item_food_6.png" class="item"></div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    sex() {
      return this.$route.query.sex === 0
    }
  },
  methods: {
    routerLink(params) {
      this.$router.goTo(this, 'dog4', { role: params })
    }
  }
}
</script>

<style lang="less">
.page-dog2 {
    .container-ui-group {
        position: absolute;
        top: calc(139vw);
        display: flex;
        justify-content: space-between;
    }
}
</style>
